<template>
  <div class="tabs">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch>
      <el-tab-pane class="el-tab-pane" label="属性" name="first">
        <div class="hua">
         <!-- //数据iconfontdata -->
          <component :is="currentcom. comName +'Prop'"></component>
        </div>
      </el-tab-pane>
      <el-tab-pane class="el-tab-pane" label="动画" name="second">
        <div class="chouti">
          <AllDrawer></AllDrawer>
        </div>
      </el-tab-pane>
      <el-tab-pane class="el-tab-pane" label="事件" name="third">
        <div class="sb">
          <ClickEvent></ClickEvent>
        </div>

      </el-tab-pane>
    </el-tabs>


  </div>

</template>
<script lang="ts" setup>
// import keep_ailve from '../components/Canvas/MyTriangle/prop.vue'
import { ref } from 'vue'
import { useComponents } from '../stores/counter'
import { storeToRefs } from 'pinia'
import type { TabsPaneContext } from 'element-plus'
import AllDrawer from '@/components/AllDrawer.vue'
import ClickEvent from '@/components/ClickEvent.vue'
// import  HuaBuatarget from '@/components/HuaBuatarget.vue'
const { currentcom }: any = storeToRefs(useComponents())

// import keep-ailve from  '../../'

const activeName = ref('first')
const color = ref('409EFF')
const colort = ref('rgba(223, 220, 220, 1)')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>

<style scoped lang="scss">
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;

}

.el-tab-pane {
  width: 100%;
  // background: red;
}

.tabs {
  width: 100%;
  height: 100%;
}

.hua {
  height: 520px;
  // background: #76859f;
  font-size: 20px;
  font-weight: normal;
}

.size {
  width: 100px;
  height: 20px;
  margin-top: -3%;
}
</style>
